<template>
    <div>
        <div class="flex items-center p-[20px]">
            当前位置：
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <NuxtLink :to="`/article`"> 文章 </NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item v-if="detailData.cate_pid">
                    <NuxtLink
                        :to="{
                            path: `/article`,
                            query: {
                                cid: detailData.cate_pid,
                            },
                        }"
                    >
                        {{ detailData.cate_p_name }}
                    </NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <NuxtLink
                        :to="{
                            path: `/article`,
                            query: {
                                cid: detailData.cate_id,
                            },
                        }"
                    >
                        {{ detailData.cate_name }}
                    </NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <NuxtLink
                        :to="{ path: `/article/detail/${detailData.id}` }"
                    >
                        详情
                    </NuxtLink>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="flex gap-4" v-loading="loadiing">
            <div class="w-full bg-body rounded-[8px] flex-none p-5">
                <div class="border-b border-br pb-4">
                    <span class="font-medium text-[22px]">
                        {{ detailData.title }}
                    </span>
                    <div
                        class="mt-3 text-tx-secondary flex items-center flex-wrap"
                    >
                        <span v-if="detailData.author" class="mr-5">
                            作者：{{ detailData.author }}
                        </span>
                        <span class="mr-5">阅读数：{{ detailData.hits }}</span>
                        <span class="mr-5"
                            >发布时间：{{ detailData.create_time }}</span
                        >
                    </div>
                </div>
                <div
                    v-if="detailData.summary"
                    class="bg-page mt-4 p-3 rounded-lg"
                >
                    摘要：{{ detailData.summary }}
                </div>
                <div class="py-4" v-html="detailData.content"></div>
                <div class="border-t border-br mt-[30px]">
                    <div class="mt-5 flex">
                        <span class="text-tx-regular">上一篇：</span>
                        <NuxtLink
                            v-if="detailData.last?.id"
                            class="flex-1 hover:underline"
                            :to="{ path: `/article/detail/${detailData.last?.id}` }"
                        >
                            {{ detailData.last?.title }}
                        </NuxtLink>
                        <span v-else> 暂无相关文章 </span>
                    </div>
                    <div class="mt-5 flex">
                        <span class="text-tx-regular">下一篇：</span>
                        <NuxtLink
                            v-if="detailData.next.id"
                            class="flex-1 hover:underline"
                            :to="{ path: `/article/detail/${detailData.next?.id}` }"
                        >
                            {{ detailData.next?.title }}
                        </NuxtLink>
                        <span v-else> 暂无相关文章 </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { articleDetail } from "@/api/cms/article";

const route = useRoute();

const loadiing = ref(true);

const detailData = reactive({
    id: "",
    cate_id: "",
    cate_name: "",
    cate_pid: "",
    cate_p_name: "",
    title: "",
    desc: "",
    summary: "",
    author: "",
    hits: "",
    content: "",
    create_time: "",
    last: {} as any,
    next: {} as any,
});

const getArticleDetail = async () => {
    const data = await articleDetail({
        id: route.params.id,
    });

    loadiing.value = false;

    for (const key in detailData) {
        if (data[key] != null && data[key] != undefined) {
            detailData[key] = data[key];
        }
    }
};

onMounted(() => {
    getArticleDetail();
});
</script>
<style lang="scss" scoped></style>
